<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>绑定 HTML Class</title>
  <link rel="stylesheet" href="">
  <script type="text/javascript" src="../../js/vue.js"></script>
  <style>
    .active{
      font-weight: bold;
      color: #f60;
      font-size: 20px;
    }
  </style>
</head>

<body>
<div id="demo" v-bind:class="{ active: isActive , 'text-arrow':hasError }" class="status">
  绑定 HTML Class
</div>
  <script type="text/javascript">
 var demo = new Vue({
  el:"#demo",
  data:{
    isActive:true,
    hasError:true
  }
 });
  </script>
</body>

</html>
